"use client";

import { useEffect, useState } from "react";

import { useParams } from "next/navigation";

import Link from "next/link";

import { api, CoTravel, MovementSummary } from "@/lib/api";

export default function VehicleProfile() {

  const { id } = useParams<{ id: string }>();

  const plate = decodeURIComponent(id).toUpperCase();

  const [m, setM] = useState<MovementSummary | null>(null);

  const [cotravel, setCotravel] = useState<CoTravel[]>([]);

  const [err, setErr] = useState<string | null>(null);

  useEffect(() => {

    api.movement(plate)

      .then(setM)

      .catch((e) => setErr(e.status === 401 ? "Sign in to view this vehicle." : "No reads for this plate."));

    api.cotravel(plate).then((r) => setCotravel(r.candidates)).catch(() => {});

  }, [plate]);

  if (err) return <div className="badge danger">{err}</div>;

  if (!m) return <div className="muted">Loading…</div>;

  const maxHour = Math.max(1, ...Object.values(m.by_hour));

  return (

    <div>

      <h1>Vehicle {m.plate_norm}</h1>

      <div className="grid">

        <div className="card"><div className="muted">Total reads</div><div className="kpi">{m.total_reads}</div></div>

        <div className="card"><div className="muted">Distinct cameras</div><div className="kpi">{m.distinct_cameras}</div></div>

        <div className="card"><div className="muted">First seen</div><div>{fmt(m.first_seen)}</div></div>

        <div className="card"><div className="muted">Last seen</div><div>{fmt(m.last_seen)}</div></div>

      </div>

      {m.anomalies.length > 0 && (

        <div className="card" style={{ borderColor: "var(--danger)", marginTop: 14 }}>

          <strong className="badge danger">⚠ {m.anomalies.length} movement anomaly</strong>

          {m.anomalies.map((a, i) => (

            <div key={i} className="row" style={{ justifyContent: "space-between", marginTop: 6 }}>

              <span className="muted">{a.reason.replace(/_/g, " ")}</span>

              <span className="badge danger">{Math.round(a.speed_kmh)} km/h</span>

            </div>

          ))}

        </div>

      )}

      <h2>Activity by hour of day</h2>

      <div className="card">

        <div style={{ display: "flex", alignItems: "flex-end", gap: 3, height: 120 }}>

          {Array.from({ length: 24 }, (_, h) => {

            const v = m.by_hour[String(h)] || 0;

            return (

              <div key={h} style={{ flex: 1, textAlign: "center" }}>

                <div title={`${h}:00 - ${v} reads`} style={{

                  height: `${(v / maxHour) * 100}px`, background: v ? "var(--accent)" : "var(--border)",

                  borderRadius: 3, minHeight: 2 }} />

                <div className="muted" style={{ fontSize: 9 }}>{h}</div>

              </div>

            );

          })}

        </div>

      </div>

      <h2>Route legs</h2>

      <div className="card">

        <table>

          <thead><tr><th>From</th><th>To</th><th>Elapsed</th><th>Distance</th><th>Speed</th></tr></thead>

          <tbody>

            {m.route.map((l, i) => (

              <tr key={i}>

                <td className="muted">{l.from?.slice(0, 8)}</td>

                <td className="muted">{l.to?.slice(0, 8)}</td>

                <td>{Math.round(l.elapsed_s)}s</td>

                <td>{l.distance_km ? l.distance_km.toFixed(1) + " km" : "-"}</td>

                <td>{l.speed_kmh ? <span className={"badge " + (l.implausible ? "danger" : "ok")}>{Math.round(l.speed_kmh)}</span> : "-"}</td>

              </tr>

            ))}

            {!m.route.length && <tr><td colSpan={5} className="muted">Single sighting - no route.</td></tr>}

          </tbody>

        </table>

      </div>

      <h2>Possible co-travelers</h2>

      <p className="muted">Vehicles repeatedly seen alongside {m.plate_norm} within the co-travel window - candidate associates.</p>

      <div className="card">

        <table>

          <thead><tr><th>Plate</th><th>Shared sightings</th></tr></thead>

          <tbody>

            {cotravel.map((c) => (

              <tr key={c.plate_norm}>

                <td><Link href={`/vehicles/${c.plate_norm}`}>{c.plate_norm}</Link></td>

                <td><span className="badge">{c.shared_sightings}</span></td>

              </tr>

            ))}

            {!cotravel.length && <tr><td colSpan={2} className="muted">No co-travel candidates.</td></tr>}

          </tbody>

        </table>

      </div>

    </div>

  );

}

function fmt(s: string | null) { return s ? new Date(s).toLocaleString() : "-"; }